<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <br><br>
        <p>info:{{ info }}</p>
        <input type="text" v-model="info">
        <input type="button" value="销毁info监控器" @click="destInfoWatch()">
        <br><br>
        <p>sum:{{ sum }}</p>
        <input type="number" v-model.number="num1">
        <input type="number" v-model.number="num2">

    </div>
    <br><br>
    <hr>
    <input type="button" value="销毁info监控器" onclick="destructInfoWatch()">
</body>
<script>
    /*
    - 实例外构建
        var vm = new Vue({……})；
        var unwatch = vm.$watch( expOrFn, callback, [options] )
    - expOrFn（string|Function）被监视的数据变量名称、对象路径表示方式、多变量配置方法
        - 取值为string ：被监视的数据变量名称或对象路径表示方式
        - 取值为Function：被监视的多变量配置方法
    - callback（Function）: 定义的监控处理方法
    - options （Object）：定义监控扩展功能
            {
                deep: Boolean 是否开启深度监视
                immediate: Boolean 是否开启初始化触发
            }
    - 返回值 unwatch （Function）: 返回一个用于关闭销毁销毁当前监控的方法
    */
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"测试数据msg",
            info:"测试数据info",
            sum:0,
            num1:10,
            num2:20
        },
        watch:{
            // 实例内定义的方法无法在程序运行过程中进行关闭操作
            msg(nv,ov){
                console.log("msg-的实例内监控方法",nv,ov);
            },
            // num1(nv){
            //     this.sum = this.num2+nv;
            // },
            // num2(nv){
            //     this.sum = this.num1+nv;
            // },
        },
        methods: {
            destInfoWatch(){
                // unwatch();
                this.infoUnwatch();
            }
        },
    })
    // 实例外定义 vm.$watch(被监控的数据仓库变量名,监控的回调函数,监视器的额外配置)
    let unwatch = vm.$watch(
        "info",
        function(nv,ov){
            console.log("info-的实例外监控方法",nv,ov);
        },
        {
            immediate:true
        }
    );
    vm.infoUnwatch = unwatch;

    function destructInfoWatch(){
        unwatch();
    }


    // 实例外多变量的同时监控
    vm.$watch(
        function(){
            // 该方法内部的返回结构会影响监控器的对应变量
            //    返回结果的格式 也会影响 回调的 newValue 和 oldValue
            // return vm.num1;
            return vm.num1+vm.num2;
            // return [ vm.num1,vm.num2 ];
        },
        function(nv,ov){
            // console.log("监控器:",nv,ov);
            vm.sum = nv;
        },
        {
            immediate:true
        }
    )

</script>
</html>